//入口文件

import Vue from 'vue'
//1.1导入路由的包
import VueRouter from 'vue-router'
//1.2安装路由
Vue.use(VueRouter)

//1.3 导入自己的router。js模块
import router from './router.js'

import moment from "moment";
//定义全局的过滤器
Vue.filter('dataFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})


//   import VueResource from 'vue-resource'
//   Vue.use(VueResource)
//  //设置请求的根路径
//   Vue.http.options.root = 'http://www.liulongbin.top:3005'

//导入axios
import axios from 'axios'
 import VueAxios from 'vue-axios'
 //Vue.use(VueAxios, axios)
axios.defaults.baseURL = 'http://www.liulongbin.top:3005'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.axios=axios  


//导入app组件
import app from './App.vue'
// //按需导入Mint-UI中的组件
// import { Header,Swipe, SwipeItem,Button, Lazyload } from 'mint-ui';
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);

//完整导入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

//导入MUI样式 
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//导入vue-preview,用于图片预览
import VuePreview from 'vue-preview'

// defalut install
Vue.use(VuePreview)

// // with parameters install
// Vue.use(preview, {
//   mainClass: 'pswp--minimal--dark',
//   barsSize: {top: 0, bottom: 0},
//   captionEl: false,
//   fullscreenEl: false,
//   shareEl: false,
//   bgOpacity: 0.85,
//   tapToClose: true,
//   tapToToggleControls: false
// })

//注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//每次刚进入网站，肯定会调用main。js,在刚调用的时候，先从本地存储中，把存储的数据拿出来
var cart = JSON.parse(localStorage.getItem('cart')||'[]')

var store = new Vuex.Store({
    state:{// this.$store.state.***
        cart:cart,//将购物车中的商品数量，用一个数组存起来，
                //在cart数组中，存储一些商品的对象，可以暂时将这个商品对象，
                 //设计成  {id：商品id，count：商品的数量，price：商品价格，selected：商品是否被选中}
    },
    mutations:{//this.$store.commit('方法名称','唯一的参数名称')
        addToCart(state,goodsinfo){//点击加入购物车，数据保存到store中的cart上
            //分析：
            //1、如果购物车中之前已经有了对应的商品，那么只要更新数量；
            //2、如果没有，则直接将商品信息push到数组cart中。

            //假设购物车一开始没有对应的商品
            var flag = false
            state.cart.forEach(item =>{
                if(item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true;
                }
            })
           //如果最终循环完毕，没有对应的商品，则进行push操作
            if(!flag){
                state.cart.push(goodsinfo)
            }

            //当更新cart之后，把cart数组存储到本地的localStorge中
            localStorage.setItem('cart', JSON.stringify(state.cart))

        },
        updateCart(state,goodsinfo){//修改购物车中商品的数量值
           // 分析：
           //some循环？
           state.cart.some(item=>{
               if(item.id == goodsinfo.id){
                   item.count = parseInt(goodsinfo.count)
                   return true
               }
           })

            //当更新cart之后，把cart数组存储到本地的localStorge中
            localStorage.setItem('cart', JSON.stringify(state.cart))
        },
        removeFromCart(state,id){//根据id删除本地state中对用的商品数据
            state.cart.some((item,i)=>{
                if(item.id == id){
                    state.cart.splice(i,1)
                    return true;
                }
            })
              //当删除cart之后，把cart数组存储到本地的localStorge中
              localStorage.setItem('cart', JSON.stringify(state.cart))
        },
        updateGoodsSelected(state,info){
            state.cart.some(item=>{
                if(item.id == info.id){
                    item.selected = info.selected
                    return true;
                }
            })
            //当switch更改之后，把所有购物车中商品的状态保存到store中去，cart数组存储到本地的localStorge中
             localStorage.setItem('cart', JSON.stringify(state.cart))
        }
    },
    getters:{//this.$store.getters.***
        getAllCount(state){
            var c = 0;
            state.cart.forEach(item =>{
                c += item.count
            })
            return c
        },
        getGoodsCount(state){
            var o = {}
            state.cart.forEach(item =>{
                o[item.id] = item.count
            })
            return o;
        },
        getGoodsSelected(state){
            var o = {}
            state.cart.forEach(item =>{
                o[item.id] = item.selected
            })
            return o
        },
        getGoodsCountAndAmount(state){
            var o = {
                count: 0, //勾选的数量
                amount: 0  //勾选的总价
            }
            state.cart.forEach(item =>{
                if(item.selected){
                    o.count += item.count
                    o.amount += item.count * item.price
                }
            })
            return o
        }
    }
})


var vm = new Vue({
    el:"#app",
    render: c =>c(app),
    router,//1.4路由挂载
    store, //挂载store状态管理对象
})